7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

De PSD a HTML: Crea un conjunto de diseños de sitios web paso a paso

Read Time: 34 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Dos veces al mes, revisamos algunas de las publicaciones favoritas de nuestros lectores a lo largo de la historia de Tuts+.

Hoy voy a guiarte a través de todo mi proceso de pasar de Photoshop a completo HTML. Vamos a construir un conjunto de 4 maquetas PSD de un sitio web que eventualmente se convertirá en un tema de WordPress. Es un amplio tutorial, así que si vas a seguirlo hasta el final, ¡asegúrate de que tienes unas horas de sobra!


Demos

Si eres como yo, entonces eres de los que les gusta ver el final antes de empezar. Puedes ver los últimos cuatro archivos HTML siguiendo estos enlaces:

  1. Página de inicio del portafolio
  2. Página de inicio del blog
  3. Página de propósito general
  4. Esquema de color alternativo

Descargar los archivos

Además, puedes descargar los archivos de origen completos HTML/CSS/Imágenes desde aquí.

Lo que estamos construyendo

Posiblemente sepas, o quizá no, estoy escribiendo (muy lentamente) un libro sobre la creación de temas de WordPress. Lo que estamos creando es en realidad el HTML que estoy usando en el libro para construir los temas principales de ejemplo. El conjunto final de temas se llama Creatif. Puedes ver, a continuación, las 4 maquetas que se muestran en las capturas de pantalla (haz clic para obtener las versiones más grandes).


Parte 1 - Construir el framework y la primera página

A diferencia de las compilaciones de sitio anteriores, este tutorial cubre una plantilla de tamaño decente. Así que vamos a realizarlo por etapas. Primero crearemos el framework, luego la primera página, luego las páginas alternativas, luego finalmente un esquema de color alternativo.


Paso 1 - Prepararse

Así que en primer lugar abrimos nuestro editor de código preferido. Realmente yo uso Dreamweaver la mayor parte del tiempo (y Textmate a veces). Me parece que tiene algunas herramientas de código bastante decentes y algunas características a las que estoy muy acostumbrado (en particular un potente Buscar+Reemplazar y un rápido enlace para <img>). Si utilizas Dreamweaver, te recomiendo configurar un "Sitio".

En cualquier caso, lo primero que hay que hacer es crear una estructura de directorios y prepararse para compilar. Normalmente tengo un directorio /images/ y un directorio /scripts/, y luego coloco todo mi CSS y HTML en la raíz.


Paso 2 - Rápida y temprana maquetación de página

Lo primero que haremos será crear un rápido diseño general en HTML con algunos CSS básicos simplemente para asegurarnos de que tenemos una base sólida. También podemos comprobarlo en los principales navegadores (IE7, IE6, Firefox, Safari) solo para asegurarnos de que partimos de una base sólida. No hay nada peor que volver hasta el principio para solucionar problemas de compatibilidad con el navegador. Es mucho mejor hacerlo sobre la marcha.

Así que estamos construyendo la primera maqueta, podemos observar algunas cosas:

  1. El diseño está centrado. Eso nos dice inmediatamente que tenemos que envolverlo en un contenedor y luego centrar ese contenedor.
  2. Esencialmente el diseño es una serie de bloques horizontales. A veces los bloques tienen dos columnas, a veces una. Así que podemos hacerlo utilizando una serie de <div>. Esto es bueno porque podemos mezclar y combinar elementos en diferentes páginas como verás más adelante.
  3. Tenemos un pie de página que es de un color diferente. Esto significa que el fondo debe ser de ese color, en caso de que el navegador de los usuarios se estire. Así que el pie de página tendrá que crearse dentro de un contenedor distinto a las cosas principales.

Así que aquí tenemos un diseño HTML:

Como puedes ver hay dos segmentos: el área principal #main y el área de pie de página #footer. Dentro de cada uno tenemos un elemento <div class="container"> que será de anchura fija y estará centrado. Después, dentro del contenedor principal solo tenemos una secuencia de <div>. Ahora vamos a añadir un poco de CSS de la siguiente manera:

Así que estamos aplicando el mismo color marrón oscuro del pie de página al fondo del cuerpo. A continuación, el área #main tiene el fondo más claro. Finalmente puedes ver que los elementos .container tienen un ancho de 950px y se centran usando margin: auto. También he añadido un borde rojo solo para que puedas ver dónde están los elementos en la página.

Puedes ver el diseño aquí, o ver la captura de pantalla a continuación.


Paso 3 - Añadir algunas imágenes de fondo

Así que nuestro diseño está buscando la forma de la nave. Con los elementos principales posicionados, es solo cuestión de avanzar y aplicar estilo a todo, no podría ser más fácil :-)

Lo primero que necesitamos son algunas imágenes. Puedes crearlas si tienes los PSD en capas, ¡o simplemente abre el ZIP descargado y encontrarás algunos que hice antes!

Aquí tienes una captura de pantalla que muestra cómo guardo yo la primera imagen, un amplio fondo JPG. Estoy usando esta gran imagen de fondo para obtener ese resaltado de degradado radial, luego usaré un segmento delgado de 1px para rellenar los lados izquierdo y derecho para ampliarlo.

Del mismo modo, crearemos una imagen de fondo para el pie de página que usaremos en forma de mosaico a lo largo del borde entre él y el área principal (puedes encontrar esa imagen en el archivo ZIP, se llama background_footer.jpg). Ahora actualizaremos el archivo CSS para eliminar ese borde rojo y añadir nuestras nuevas imágenes de fondo, de la siguiente manera:

Dos cosas a tener en cuenta:

  1. Hay varias maneras de establecer un fondo. En #main he utilizado un selector único que establece tres propiedades: color, imagen, repetición de imagen. Pero también puedes establecer cada propiedad individualmente como lo he hecho en #main .container y #footer.
  2. Ten en cuenta que como quiero aplicar la imagen "background_light.jpg" al <div class='container'> que está dentro de #main, pero no al que está dentro de #footer, he escrito #main .container. En otras palabras, aplícala solo a los elementos con la clase 'container' que están dentro de los elementos con el id 'main'.

Paso 4 - Pruebas en navegadores

Hasta ahora, bien. No te olvides de comprobarlo en diferentes navegadores. Aquí puedes verlo en IE7 ¡se ve bien y dandi!


Paso 5 - Crear un logotipo transparente

A continuación, he creado el elemento del logotipo. Como más adelante vamos a ejecutar un esquema de color alternativo voy a utilizar un archivo PNG con fondo transparente. Puedes crearlo desactivando el fondo en Photoshop y luego yendo a Archivo > Guardar para Web y Dispositivos y seleccionando PNG-24. Debes tener en cuenta que PNG-24 produce tamaños de archivo bastante altos. Está bien para una imagen pequeña como esta, pero las imágenes más grandes podrían acabar teniendo un tamaño de archivo excesivo.

(Si alguien sabe cómo hacer archivos PNG comprimidos, deja un comentario, porque estoy bastante seguro de que existe una manera de hacerlo, ¡simplemente no sé cómo!)

De todos modos, puedes agarrar el logotipo transparente PNG aquí.

Ahora vamos a añadir nuestro logotipo y también un menú con este HTML:

Y este CSS extra:

Algunas cosas a tener en cuenta:

  1. En lugar de simplemente colocar la imagen del logotipo en el HTML, hemos creado un <div id="logo"> y dentro de este hemos colocado un <h1> con el título. Luego, usando CSS, hemos hecho que el texto desaparezca y lo hemos cambiado por la imagen del logotipo. Esto tiene algunos beneficios SEO.
  2. Solía establecer el texto a display:hidden, pero un amable comentarista de un tutorial anterior señaló que esta es una mala práctica y es mejor desplazar el texto mediante "text-indent". Así que como puedes ver, *sí * leo mis comentarios :-)
  3. He colocado un menú muy rápidamente y sin estilo usando una lista desordenada. Al establecer la propiedad display en inline para los elementos <li>, la lista cambia a un conjunto horizontal de elementos ... ¡Guau!
  4. Finalmente, como nuestro elemento <div class="container"> tiene position:relative, ahora podemos usar el posicionamiento absoluto dentro y establecer right:0px para el menú de manera que se alinee a la derecha. Esto es ideal para un tema de WordPress porque a medida que la persona crea nuevas páginas el menú se extenderá, y de esta manera se mantendrá alineado a la derecha.

Paso 6 - Corregir la transparencia en IE6

Ahora el único problema con los PNG transparentes es que nuestro amigo Internet Explorer 6 no los soporta! Afortunadamente eso es relativamente fácil de arreglar gracias a este artículo que encontré, The Easiest Way to Fix PNG for IE6 (La manera más sencilla de solucionar los PNG para IE6). Acabamos de descargar un script y de añadir esta línea en nuestro CSS:

Desafortunadamente para mí, como estoy en un Mac, la única forma de comprobar mi copia de prueba para IE6 es a través de Darwine, y este no reconoce la solución... Así que no tengo idea de si mi truco está funcionando :-)

Así que de alguna manera en este momento dejé de prestar atención a IE6 :-) Voy a tener que conseguirme otra forma de testear en IE6, tal vez a través de parallels.

En cualquier caso, aquí hay una captura de pantalla de lo que obtenemos en IE6 cuando la transparencia *no* está funcionando...


Paso 7 - Fijar el menú

Ahora nuestro menú todavía se ve bastante feo, así que vamos a añadir algunos estilos para terminarlo, de la siguiente manera:

Aquí no hay nada muy emocionante, excepto que hemos definido un estilo "activo" que es el mismo que el estilo :hover (es decir, es un tono más oscuro). Eso significa que podemos escribir <a href="" class="active"> y el enlace se oscurecerá.</a> Más adelante en WordPress lo haremos para que puedas conocer en qué página estás en un momento dado.


Paso 8 - Añadir el contenido del elemento destacado del portafolio

Ahora que tenemos la base de nuestra página, es hora de empezar a añadir los bloques de contenido. Como mencioné anteriormente vamos a hacer este sitio como una serie de bloques de contenido intercambiables. El primero es el bloque "Featured Project" (Proyecto destacado). Así que vamos a añadir un poco de HTML:

Así que ese código va por debajo del código <div id="header"></div> de los pasos anteriores. Y sin estilo se ve así:

Aquí existen dos cosas importantes a tener en cuenta:

  1. Verás que tenemos un <div class="block"> seguido inmediatamente por un <span class="block_inside">. Esto se debe a que las cajas que estamos dibujando tienen un borde doble, primero hay un borde gris oscuro de 1px, y después, dentro de este tenemos un borde blanco de 1px. De manera que al tener dos elementos podemos tener un borde en cada uno. No sé por qué usé un <span> en el interior, y como verás más adelante terminamos cambiándolo :-)
  2. Donde tenemos el botón View Project (Ver proyecto), en lugar de usar una imagen, vamos a crear una clase 'botón' y luego la aplicaremos a enlaces de texto normales. Esto hace que el botón sea muy simple y reutilizable.

Paso 9 - Añadir algunos estilos básicos

Ahora aplicamos un estilo básico como este:

Así que como mencioné anteriormente tenemos la clase .block que sólo establece un borde y un margen inferior. Luego inmediatamente dentro tenemos el elemento .block_inside que tiene un borde blanco, un fondo (para aplicarle ese sutil degradado), un poco de relleno (padding) y finalmente un valor de desbordamiento (overflow).

Tenemos overflow:auto porque vamos a tener dos elementos flotantes dentro. Solía usar un <div> para despejar pero alguien en mis comentarios anteriores señaló que esto funciona igual de bien y es mucho más limpio!

Luego, dentro tenemos una clase .image_block que le da a nuestra imagen un doble borde (uno en el <div> y otro en la imagen en sí) el cual es flotado a la izquierda con nuestro .text_block principal también flotado a la izquierda para formar un diseño con mini columnas.

Así que nuestro diseño ahora se ve así:


Paso 10 - Añadir estilos de texto

Ahora el estilo del texto está por todas partes en este momento. Se veía bien en la captura de pantalla anterior porque estaba usando el navegador Firefox, en el cual estaba aplicando como fuente predeterminada una Sans-Serif. Pero si hubiera hecho capturas de pantalla de IE, habrías visto un tipo de letra Serif en su lugar. Así que ahora deberíamos ordenar el texto. Añadiremos estos fragmentos de CSS a nuestra hoja de estilos:

Así que:

  1. Primero he actualizado la etiqueta body para que tenga una fuente, un color, un tamaño y una altura de línea predeterminados.
  2. Entonces hemos creado un estilo <h2> que soluciona los márgenes y establece la fuente en Helvética
  3. También hemos creado un estilo <small> para los subtítulos (como en qué categoría se encuentra una entrada, etc.)
  4. Hemos creado un estilo link y un estilo link:hover para los enlaces
  5. Hemos restablecido los estilos de los párrafos (<p>) para que los márgenes tengan valores distintos a los predeterminados estúpidos
  6. Finalmente hemos creado esa clase de botón. Ten en cuenta que lo he definido como "a.button", o en otras palabras, todas las etiquetas <a> con la clase "button". ¿Por qué no lo definí simplemente como ".botón"? Bueno, es muy posible que cree una segunda clase de botón para los campos de entrada <input> y será ligeramente diferente. Así que de esta manera no interactuarán accidentalmente.
  7. En la clase de botón verás que hemos establecido un poco de padding, un borde, una imagen de fondo, un estilo hover y un atributo de altura de línea (line-height) ... espera, ¿un atributo de altura de línea? Sí, por desgracia, esta es una solución para IE que de lo contrario corta el botón.

Con nuestro estilo extra, ¡la página está empezando a tomar forma!


Paso 11 - Añadir el borde

Una de las cosas que distinguen a este diseño son las pequeñas tiras de cinta azul en la esquina derecha. Gracias a una mezcla de CSS, archivos PNG transparentes y posicionamiento absoluto, son muy fáciles de añadir. Así que primero tenemos que crear la imagen. Una vez más creamos una imagen con un fondo transparente y la guardamos como PNG-24, aquí está la imagen:

A continuación tenemos que colocar la imagen en nuestro HTML, podemos hacerlo de la siguiente manera:

Así que puedes ver la etiqueta <img> allí en la segunda línea. Ten en cuenta que le he asignado una clase "ribbon" y lo puse dentro del elemento .block, pero fuera del elemento .block_inside. Eso es porque si lo hacemos dentro de .block_inside entra en conflicto con la propiedad overflow:auto que establecimos anteriormente. De todos modos ahora mismo esto sólo arruinará nuestro diseño, así que vamos a añadir un poco de estilo:

Puedes ver que hemos hecho lo siguiente:

  1. Se ha añadido un atributo position:relative al elemento .block. Esto es para que podamos usar el posicionamiento absoluto dentro y posicionarlo en relación al elemento .block (y no a toda la página)
  2. Luego hemos configurado la imagen para que aparezca 3px más allá del borde derecho y 3px más allá del borde superior.

¡Fácil! En su día, habríamos tenido que usar algunos super complicadas tablas (etiqueta <table>) para lograr ese mismo efecto. Así es como se ve ahora:


Paso 12 - Crear el segundo bloque

Con el borde añadido, ¡nuestro primer elemento de bloque ya está completo! Ahora es el momento de empezar con el próximo bloque <div>. Este tendrá ese texto sobre el tema y la lista de proyectos recientes. Así que primero añadimos un poco de HTML:

Eso parece un montón de código, pero en realidad no lo es. Vamos a repasarlo:

  1. Primero hemos creado un contenedor <div id="block_portfolio"> para envolver el segmento de código
  2. A continuación tenemos un <div id="portfolio_items"> que contiene tres idénticos <div class="mini_portfolio_item">. Hablaremos de ellos en un segundo.
  3. A continuación tenemos un <div id="text_column"> que está lleno de algún texto y un encabezado <h2>.
  4. Lo que vamos a hacer es flotar la columna de texto y los elementos del portafolio uno al lado del otro para formar dos columnas de contenido.
  5. Vamos a reemplazar ese <h2> con una imagen de fondo.</h2>
  6. Y vamos a estilizar esos divs mini_portfolio_item para que se vean bien usando un efecto de doble borde similar al que creamos anteriormente.

Aquí está el CSS:

De nuevo, parece mucho, pero no está tan mal. Veámoslo paso a paso:

  1. Primero hemos usado de nuevo overflow:auto en el elemento principal #block_portfolio. Eso es porque de nuevo tenemos dos columnas flotantes y si no hacemos esto, se colocarán por encima del pie de página.
  2. A continuación, hemos establecido que los elementos #portfolio_items floen a la izquierda, con un margen para separarlos de la columna de texto y un ancho de 615px.
  3. La columna #text_column se flota a la derecha y se le asigna un ancho de 310px.
  4. Dentro de la columna de texto hemos vuelto a hacer ese truco con nuestra etiqueta <h2> mediante el cual usamos una amplia sangría de texto para hacer que el texto desaparezca y luego usamos una imagen de fondo.

A continuación tenemos tres definiciones de estilo para los elementos mini_portfolio_item, son las siguientes:

  1. Primero establecemos un borde oscuro de 1px y un margen entre ellos
  2. A continuación, redefinimos los estilos de .block_inside para que se adapten a estos elementos. Recuerda que definimos .block_inside anteriormente cuando hicimos el área Featured Project. Así que aquí estamos reemplazando la imagen de fondo, cambiando el color de fondo y cambiando el relleno.
  3. Finalmente hacemos que las imágenes en miniatura floten a la izquierda y tengan un borde.

Así que en conjunto se ve así:


Paso 13 - Añadir un borde.

Ahora queremos añadir una cinta a "Recent Projects" en la parte superior del elemento. Para ello simplemente lo colocamos, en la misma posición en la que lo colocamos en el HTML anterior. De la siguiente manera:

Luego añadiremos un atributo position:relative al elemento mini_portfolio_item como este:

Pero algo raro sucede... Mientras que el lado derecho se ve correcto, la parte superior queda cortada, como se puede ver en la captura de pantalla:

La razón es que el elemento que contiene nuestro mini_portfolio_item lo está recortando. Así que comprobamos y vemos que los elementos mini_portfolio_item están todos dentro de un <div id="portfolio_items">. Así que la solución es bastante fácil, añadimos 3px de relleno a la parte superior, este es un espacio suficiente como para que nuestra cinta se muestre. Aquí está el CSS ajustado:


Paso 14 - Terminar los elementos del portafolio

Finalmente he intercambiado algunas imágenes y títulos para que podamos ver cómo se ve la página con 3 elementos diferentes en lugar de usar la misma repetidamente. Entonces también decidí deshacerme del botón View Project (Ver proyecto) y solo tengo un enlace de texto. Esto tiene un aspecto un poco más limpio y menos abarrotado. Así que aquí está la sección final de elementos del portafolio (que se muestra en Safari, ¡no te olvides ir probando contínuamente en diferentes navegadores!):


Paso 15 - Añadir contenido de pie de página

Ahora solo falta una sección más a nuestra página: ¡el pie de página! Vamos a añadir algo de contenido de texto a él:

Algunas cosas a tener en cuenta:

  1. He creado tres <div class="footer_column"> para albergar el contenido del pie de página, vamos a flotar estos a su lugar en un segundo.
  2. Dado que la primera columna tiene un ancho diferente, le he dado una segunda clase llamada "long". Ten en cuenta que se establecen dos clases de la siguiente manera: class="class1 class2", no así: class="class1" class="class2" que no sería un marcado válido.
  3. Dentro de las columnas que he usado etiquetas de listas desordenadas <ul> y etiquetas <h3> para los encabezados. Siempre es bueno usar un buen marcado semántico, tanto porque lo hace más legible, como porque a los motores de búsqueda les gusta ver esos encabezados y listas, todo bien dispuesto.

¡Así es como se ve!


Paso 16 - Aplicar estilo al pie de página

Aplicar estilo al pie de página es un trabajo bastante simple, aquí tienes el código que necesitamos:

Explicación paso a paso:

  1. Primero establecemos las fuentes para el área del #footer
  2. Luego establecemos todas las columnas para que floten con un ancho predeterminado de 120px
  3. Reemplazamos esta anchura para la columna .long. Observa que he establecido "#footer .long" en lugar de simplemente ".long". La razón por la que he hecho esto es que "long" es el tipo de nombre genérico que podría usar posteriormente en algún otro sitio, así que es buena idea especificarlo de forma más clara.
  4. Finalmente, a las etiquetas <h3> y <ul> les aplicamos algunos estilos simples

Paso 17 - ¡Añadir un favicon!

Ya casi terminamos nuestra primera página. Es hora de añadir algunos elementos de embellecimiento. Primero un favicon. Estos son esos pequeños iconos que aparecen en la barra del navegador. No necesito nada elegante, solo un pequeño cuadrado negro con una C para Creatif, con eso bastará. Así que primero creamos una imagen cuadrada como esta:

Hay un montón de sitios para crear favicons (Visita SixRevisions para consultar una lista de los mismos), no obstante, yo siempre uso html-kit's sin ninguna razón en particular. Sólo tienes que cargar la imagen y pulsar Generate Favicon.ico (generar favicon).

Luego lo conectamos con esta línea de HTML:


Paso 18 - ¡Validar!

¡Ahora es el momento de comprobar que nuestro marcado es w3c válido! Así que vamos a poner nuestro código en el validador Validator y a cruzar los dedos ... Y boom :-( No somos válidos. No recuerdo haber obtenido nunca resultados válidos en el primer intento, ¡debo tener malos hábitos!

Mirando hacia abajo hay 14 errores. El problema número uno es que no hay texto alternativo en ninguna de mis imágenes... ¡madre mía! Así volvamos atrás y añadámoslos de la siguiente manera:

Esto debería corregir muchos de los errores. Así que ahora lo ejecutamos de nuevo y ... redobles de tambor ... ¡Oh! Sigue siendo inválido. OK esto parece un poco más complicado:

Afortunadamente, los 8 errores restantes son en realidad el mismo problema. Básicamente he utilizado un elemento inline (específicamente un <span class="block_inside">) y luego trató de poner elementos de nivel de bloque como <div> dentro. Aparentemente eso no está permitido ... ¡Mecachis!

Por suerte, esto se corrige fácilmente, solamente cambiamos cada instancia de <span class="block_inside"> por un <div class="block_inside">. Y... ¡Guau! Lo conseguimos :-)


¡Parte 1 terminada!

OK hemos creado con éxito nuestra página básica! Aquí puedes verme probándolo en IE7 y afortunadamente no hay errores.

Aquí está la página completada


Parte 2 - Construir las variaciones

Con nuestro marcado básico en su sitio, ahora estamos preparados para construir las páginas adicionales y el esquema de color alternativo. Afortunadamente hemos establecido una buena base y seremos capaces de hacer uso de una gran parte del código que ya hemos escrito. Por eso es muy importante planificar con anticipación.

Si no planeas, puedes terminar fácilmente con mucha duplicación, código adicional y otras locura.


Paso 19 - Construir la página de inicio del blog

La siguiente página que vamos a construir es la página de inicio del blog. Esto es similar a la página de inicio del portafolio en el sentido de que tendrá una entrada de blog destacada y luego, a continuación, una serie de entradas de blog. Eventualmente estos se convertirán en dos temas relacionados de WordPress, uno para portafolios, y otro para blogs.

Así que primero duplicamos nuestro indice.html, el archivo en el que hemos estado trabajando hasta ahora, y llamamos al nuevo archivo blog.html.

En nuestro blog.html eliminamos primero todo el <div id="block_portfolio">. En breve reemplazaremos ese bloque por otro. A continuación, reemplazamos <div id="block_featured"> con un nuevo bloque para entradas de blog destacadas que es ligeramente diferente y se ve así:

Así que realmente todo lo que he hecho es cambiar la etiqueta id para que sea block_featuredblog, la imagen de la cinta de opciones y el contenido. Esencialmente, aunque es el mismo diseño. Así que echemos un vistazo y veamos qué aspecto tiene:


Paso 20 - Ajustar un poco de CSS

Así que prácticamente funciona tal cual, sólo vamos a hacer un par de pequeños ajustes en el CSS de la manera siguiente:

Aquí he ajustado la clase "text_block", pero solo cuando está en el elemento #block_featuredblog. Ahora tiene un poco de relleno en la parte superior y es más ancho.

También he añadido una altura de línea adecuada al encabezado y, por capricho, ajusté el kerning de texto a un valor igual a 1px. ¡Y ya hemos terminado con este elemento! ¡Fácil y sencillo!


Paso 21 - Crear el área de contenido principal

Hacer esta área de contenido es la última gran cosa que tenemos que hacer realmente. Formará no solo la parte inferior de esta página, sino también toda la base de la página genérica (con algunos ajustes, ¡por supuesto!). Así que primero vamos a crear algo de html realmente básico:

Así que básicamente lo que hemos creado es un elemento contenedor, <div id="block_content"> y luego dentro de este tenemos dos bloques que vamos a flotar a cada lado. Verás que estoy haciendo uso de nuestros viejos elementos <div class="block_inside"> para añadir el borde doble. Aquí está el CSS para colocarlos correctamente:

Revisando los estilos:

  1. Después hemos aplicado un ancho y un atributo float distinto a la caja #content_area y al cuadro #sidebar.
  2. A continuación, he movido la barra lateral 1px a la izquierda usando un posicionamiento relativo (position:relative). Hice esto para que el borde izquierdo se solapase y se viera como si estuviera sobresaliendo.
  3. Además, he añadido un margen superior de 15px para que la barra lateral no esté alineada en la parte superior. Actualmente se ve un poco extraño, pero cuando añadamos algo de contenido se verá muy bien.
  4. Finalmente he redefinido .block_inside en el elemento #sidebar para reemplazar la imagen de fondo y en su lugar darle ese color beige para el fondo.

Paso 22 - Añadir contenido

Ahora añadimos algo de contenido a nuestros dos elementos para aplicarles estilo:

OK hay tres cosas importantes a mencionar aquí:

  1. En primer lugar en el área de contenido verás que he añadido tres entradas de blog ficticias y en medio de cada una hay un <div class="separator"> vacío al que aplicaremos estilo en breve añadiéndole una línea delgada con un poco de espaciado.
  2. A continuación, hemos añadido una imagen de cinta a la barra lateral de la misma manera que hicimos anteriormente.
  3. Finalmente he usado un <div> en la parte inferior para despejar. Ahora, anteriormente en este tutorial he estado usando overflow:auto; para tratar con columnas flotantes, pero cuando añadimos el margen-superior en el paso anterior para mover la barra lateral hacia abajo se crea un problema con el desbordamiento y crea una barra de desplazamiento. Así que, dado que puede haber ocasiones en las que la barra lateral sea más larga que la caja de contenido vamos a utilizar este método que elimina la flotación del <div> en su lugar.

Ahora vamos a añadir un estilo básico para arreglarlo todo de la siguiente manera:

Dos cosas a tener en cuenta:

  1. He formateado las listas <ul> de la barra lateral para eliminar los puntos de viñeta y para espaciarlos bien
  2. He creado un estilo separador usando margen y relleno junto con un borde de 1px

Y eso es todo, ¡nuestro elemento #block_content está completo! Aquí puedes ver el HTML resultante.


Paso 23 - Crear la página genérica

Hacer nuestra página final ahora nos resultará realmente sencillo. Sólo duplicamos nuestro blog.html y lo llamamos page.html esta vez. A continuación, elimina la entrada destacada del blog y modifica el código HTML del área #block_content de la siguiente manera:

Lo cual es más o menos el mismo HTML anterior, únicamente    con un texto diferente y una nueva cinta. El único cambio real es que ahora tenemos un título y por encima de esto, un subtítulo envuelto en una etiqueta <h4>. Así que podemos aplicarle estilo con un par de líneas de CSS, de la siguiente manera:

¡Y eso es todo! Mira aquí la página genérica final.


Paso 24 - ¡No importa si es blanco o negro!

Ahora vamos a crear un CSS muy simple para cambiar el sitio cambiando los tonos claros por oscuros. Lo bueno de esto es que el único HTML que necesitamos cambiar es esta línea:

¡Eso es todo! Con ese fragmento de código HTML adicional podemos hacer todos los ajustes CSS necesarios. Esto significa que si lo deseases, fácilmente podrías crear un pequeño botón Javascript que cambie la hoja de estilo. La forma en la que va a funcionar es aplicable a cualquier clase que deba cambiar, solo añadimos un estilo extra comenzando con body-dark. Así que en primer lugar decimos:

Y eso le dice al navegador que si el ID de la etiqueta body es "dark" (<body id="dark">), ¡reemplace los estilos para #main, #main .container, #footer, y los estados activos y hover del menú, cambie algunas imágenes de fondo por otras nuevas y cambie el color del texto a blanco! ¡Juego de niños!


Paso 25 - Los bordes y la fijación del texto

Como puedes ver en la imagen inferior de nuestro pie de página,  se corrige gracias a la nueva imagen de fondo y el color, solo faltan dos correcciones más: el texto "Creatif is a WordPress..." y los bordes alrededor de las cajas que son demasiados claros y ahora deben ser oscuros. Así que hacemos esto:


Paso 26 - ¡Color alternativo!

¡Y eso es todo! Tenemos un esquema de color alternativo todo controlado por una sola etiqueta id en el elemento <body>. ¡Esta es la magia de los archivos PNG transparentes y CSS para ti!


¡Terminado!

¡Eso es todo! El HTML está totalmente terminado. No olvides que puedes ver las páginas completas siguiendo estos enlaces:

  1. Página de inicio del portafolio
  2. Página de inicio del blog
  3. Página de propósito general
  4. Esquema de color alternativo

Además, puedes descargar aquí los archivos fuente completos del HTML/CSS/Image y a través de Tuts+ puedes obtener los archivos PSD completos en capas *y* un tutorial sobre su diseño.

Recursos adicionales

Si eres nuevo en la conversión de PSD a HTML, te recomendamos una serie de cursos introductorios para ponerte al día con los conceptos básicos:

Si estás interesado en obtener ayuda con la conversión de tu diseño PSD, Envato Studio tiene una gran colección de servicios para pasar archivos PSD a HTML que seguramente quieras explorar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.