En este tutorial mostraremos como maquetar desde un layout PSD de una web hecha en Photoshop. Como ejemplo vamos a utlizar la nueva maqueta de este site.

Queremos maquetar este diseño:

1.- Creación de archivos

Crearemos una nueva carpeta que llamaremos “knowDB”, y dentro de esta carpeta crearemos otra carpeta llamada “images”. Abrimos un editor de texto plano y creamos un nuevo documento y lo grabamos como “styles.css” en el directorio “knowDB”. Creamos de la misma forma otro archivo que se llame “index.html”



Abrimos ambos ficheros (styles.css e index.html) en nuestro editor de texto plano. Y colocamos el código de estructura base de estos archivos asi como el link desde el index al estilo css.La forma en la que maquetamos aqui el PSD es desde arriba hacia abajo, asi que empezaremos con las partes principales como el container, el títle y la navigation. La primera cosa que necesitamos es un contenedor o container que sostenga nuestro website, y entonces dentro del container habrá otro contenedor donde irá nuestro fondo. Y entonces ahi irá nuestro title y nuestra barra de navegación. Esto puesto en un borrador html5 es algo como esto:

index.html

[codebox 1]

Observese que para no perdernos en el código HTML marcamos con comentarios donde empieza un div y donde termina ese div.

2.- Importar imagenes desde Photoshop

Antes de empezar a realizar nuestro CSS, necesitamos importar imagenes desde nuestro PSD. En nuestro caso solo tenemos el logo de la imagen, porque no tenemos fondo , es decir nuestro fondo es blanco. Entonces desde Photoshop nos ponemos en la layer del logo , y seleccionamos esa imagen para copiarla en un nuevo archivo y grabarla como archivo .png. (no olvidar que al crear el nuevo archivo se haga con fondo transparente)

NOTA: La linea vertical la haremos con CSS.

3.- Creamos el estilo CSS

Ahora que ya tenemo nuestro conjunto de imagenes podemos añadir estilos CSS. El primer conjunto de estilos que escribiremos será los estilos del body que se repetirán a lo largo de todo nuestro site.

[codebox 2]

Como no queremos ni margenes ni padding alrededor de nuestro site los ponemos a 0. Queremos una familia de font comunes “Arial, Helvetica, sans-serif;” (esto es una pila de varios tipos de letra para cubrir aquellos usuarios que no tengan algun tipo de font instalado en sus sistema); le colocoamos un tamaño de 12 pixeles y el color #797979. En nuestro caso el color del fondo es blanco: #FFFFFF.

Pasamos ahora a definir los estilos de nuestro container y de nuestro fondo:

[codebox 3]

La anchura de nuestro div container la ponemos del ancho que tenga en nuestro archivo PSD (para ello activar las reglas de Photoshop y con la herramienta de seleccion y viendo la ventana de informacion se puede ver en pixeles el tamaño del objeto que queramos). Para este div ponemos tambien el margin a auto de forma que se quede centrado todo la web para todos los tipos de navegadores.

Despues ponemos estilo al div de mifondo, en nuestro caso no tiene efecto porque no tenemos fondo, pero en el caso de que tuvieramos una imagen de fondo es aquí donde se especifica. Ponemos la anchura para que sea la misma que la de nuestro container y queremos que se ajuste a la izquierda y por eso ponemos float:left.

Ponemos ahora estilo a nuestro logo y barra de navegación:

[codebox 4]

En la capa del logo ponemos la misma height y width de la imagen del logo.

En la capa de nav ajustamos la posición para que quede por debajo del logo y en vertical. Será aquí donde irá el árbol de categorias.

Vayamos ahora con el contenido que irá dentro de la etiqueta htmls section

The content div will be like a container for our content box, we just need to float it left and add a width of 511 pixels which is how wide i want it to be. If you view your HTML file in your browser you should have something like this.