ShutterPress Diseño y código de un sitio de portafolio de fotos (Día 3 HTML / CSS)

Hoy continuamos la serie de tutoriales para crear el diseño de ShutterPress convirtiéndolo de un PSD en bruto a un sitio web funcional utilizando HTML y CSS. Por ahora, hemos creado el diseño inicial del sitio y reunimos los recursos necesarios para la codificación. Ahora vamos a codificarlo para que funcione en todos los principales navegadores!

Introducción: Día 3, Conversión HTML / CSS

¡Hoy se trata de convertir nuestro diseño PSD en un sitio HTML completamente funcional! Lo guiaremos paso a paso a través del marcado, hasta que tengamos un sitio que se vea bien en todos los navegadores principales. Nos acercaremos a esto desde una intermedio nivel de comprensión, por lo que si pasamos demasiado rápido por cualquiera de los pasos básicos, no dude en hacer cualquier pregunta específica en la sección de Comentarios a continuación.

Un grito especial va a CodeMyConcept, ¿Quién ha proporcionado gentilmente el código y el tutorial para este día de la serie?!

Si te perdiste los dos días anteriores de esta serie, échales un vistazo aquí:

Día uno: diseño
Día dos: Pre-vuelo

Ok, con nuestras metas ahora claramente definidas, comencemos!

Paso 1 Estructura de la carpeta básica y diseño

Primero, comenzamos por crear la estructura de carpetas básica para nuestro proyecto, que definitivamente necesitamos tener para mantener los activos bien estructurados y organizados..

En este caso, vamos a necesitar una carpeta "css" con nuestro archivo css principal, una carpeta "images" y una carpeta "js" (Javascript) una vez que el HTML y CSS estén completos para poder agregar el control deslizante, lightbox y complementos de acordeón. También el archivo index.html en la carpeta raíz.

Luego creamos la estructura HTML básica del diseño con las secciones izquierda y derecha. Vamos a utilizar un div de envoltorio para contener y centrar todo y nuestros contenedores Izquierda y Derecha en el interior, así como un div en la parte superior e inferior del envoltorio para ayudarnos con las esquinas redondeadas y mantener el diseño flexible.

    ShutterPress       
   IEFFT MENU AQUÍ 
   CONTENIDO DERECHO AQUÍ

En realidad, preferimos crear el HTML antes de escribir cualquier CSS, aunque algunas personas hacen una sección de HTML y CSS al mismo tiempo y luego pasan a la siguiente sección. Hemos encontrado que hacer todo el HTML primero nos ayuda a pensar en el CSS por adelantado y en todo lo que pueda ser necesario, como Javascript o PHP incluido. Todo lo que agrego en este punto es mi restablecimiento de CSS.

Paso 2 a la izquierda menú HTML

Así que comenzamos por codificar el menú del lado izquierdo. Aquí, vamos a necesitar una etiqueta h1 y un enlace para nuestro logotipo, y una lista desordenada para nuestros elementos del menú. También necesitamos anidar otra lista desordenada en la tercera etiqueta li para nuestro submenú, y hacer lo mismo con algunos elementos ficticios en la segunda etiqueta li para que podamos ver nuestro acordeón javascript trabajando más adelante.

También debemos agregar algunas clases "abiertas" y "cerradas" a los enlaces y al submenú para poder controlar los iconos y qué submenú se abre de manera predeterminada, y la clase activa para resaltar la página que estamos viendo actualmente.

 ShutterPress
  Casa
  Sobre el estudio  Objeto 1
 Artículo 2
 Artículo 3
 
  
  Galerias de imagenes  Galeria 4X4
 Galería de retratos
 Galería deslizante
 
  
 Contacto

Ahora, justo después de eso, vienen los íconos sociales y el campo de búsqueda en nuestra sección Izquierda ubicada en la parte inferior. Entonces, crearemos un div contenedor para la sección inferior y separaremos [divs] para cada una de las dos partes dentro de ese contenedor.

Para los íconos sociales necesitaremos un espacio para el texto y una lista para los íconos, cada uno con una clase para ayudar a obtener la imagen del ícono correcta y su respectivo estado de desplazamiento..

Para la sección de Búsqueda, crearemos un formulario y divs que contengan las entradas correspondientes para ayudarlos a flotar y agregar los fondos e íconos. Hacer esto en lugar de aplicar los estilos directamente a las entradas funciona mucho mejor para evitar problemas de navegación cruzada con alturas de línea y sangría de texto.

   Social:  tumblr
 picasa
 vimeo
 flickr
 gorjeo
 Facebook
 rss

Así es como se ve en nuestro navegador junto con el restablecimiento de CSS

Paso 3 Derecho contenido HTML

Ahora que hemos completado nuestro menú de la izquierda, podemos comenzar a codificar la parte de contenido correcta para la galería de miniaturas.

Así que primero creamos una lista desordenada de imágenes dentro de los enlaces para que puedan hacer clic para nuestro complemento lightbox, y luego creamos un div para contener nuestros botones anterior y siguiente.

  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   Anterior Siguiente

En este punto, debemos comenzar a cortar las miniaturas y guardarlas con su nombre correspondiente del HTML para poder mostrar algunas imágenes en línea..

Así es como debería verse todo nuestro HTML en Firefox

Paso 4 CSS Reset y Wrapper

Ahora, para algunos estilos, configuramos algunas configuraciones generales para las fuentes, el texto, los colores de los enlaces y la imagen de fondo.

 / * ------------------------------ * / / * RESET GENERAL * / / * -------- -------------------- * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, hr, button  margen: 0; relleno: 0; borde: 0; esquema: 0; tamaño de letra: 100%; alineación vertical: línea de base; fondo: ninguno;  ol, ul estilo de lista: ninguno; h1, h2, h3, h4, h5, h6, li line-height: 100%; blockquote, q comillas: ninguna; q: antes, q: después content: "; table border-collapse: colapso; border-spacing: 0; input, textarea, select font: 11px Arial, Helvetica, sans-serif; vertical-align: middle; padding: 0; margin: 0; input: focus, textarea: focus outline: none; form, fieldset border-style: none; html, body margin: 0; padding: 0; min-height: 100%; / * - --------------------------------*/ /* CONFIGURACIÓN GENERAL */ /*-------- ----------------------- * / body altura: 100%; fuente: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif ; color: # 000; fondo: url ('? /images/bg.jpg') repita #fff; a text-decoration: none; color: # 000; a: hover text-decoration: none; color : # 0285da;

Luego configuramos los estilos de envoltura para que podamos construir la base de nuestro diseño, que comenzamos a hacer definiendo el ancho de la envoltura y centrando con un margen: 0 automático;

Para los divs superior e inferior que definimos anteriormente, configuramos las imágenes de fondo y las dimensiones requeridas para crear nuestras esquinas redondeadas superior e inferior, y para el contenedor, configuramos una imagen de fondo repetida en el eje Y que cubrirá nuestro contenido que contiene La línea divisoria entre el contenido izquierdo y derecho..

Para la división de la parte inferior de la envoltura debemos configurar un claro: ambos; porque una vez que flote mis contenedores de Derecha e Izquierda, la envoltura se va a colapsar, por lo que debemos evitar esto limpiando los flotadores.

 / * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top background: url ("? /images/content-top.jpg") no repetir el centro del desplazamiento arriba #FFFFFF; altura: 18px; ancho: 994px;  #wrapper ancho: 994px; desbordamiento: oculto; margen: 64px auto 0; background: url ("? /images/content-bg.jpg") repetición-y centro de desplazamiento centro #FFFFFF;  # wrapper-bottom background: url ("? /images/content-bottom.jpg") no repetir el centro del desplazamiento arriba #FFFFFF; altura: 61px; ancho: 994px; Limpia los dos;

Aquí está el resultado en nuestro navegador:

Paso 5 Menú Izquierdo CSS

Ahora que tenemos nuestra envoltura lista, podemos continuar con el contenido: primero, configuramos el ancho de los contenedores derecho e izquierdo para que podamos llevarlos a la posición correcta.

 / * -------------------------- * / / * MENÚ IZQUIERDO * / / * ------------ ------------ * / / * Menú principal * / #left ancho: 235px; flotador izquierdo;  / * ------------------------------ * / / * CONTENIDO DERECHO * / / * ------- --------------------- * / / * Contenido de la Galería de miniaturas * / #right width: 758px; flotar derecho;

Ahora comenzamos a diseñar la navegación creando una imagen de sprite para el logotipo, los botones y los iconos en el diseño..

Este diseño en particular no parece que vaya a crecer en altura, pero aún así queremos mantener las cosas flexibles en caso de que haya una necesidad futura de agregar más elementos a la navegación..

Así que configuramos el contenedor izquierdo con una altura mínima para que la división de la parte inferior izquierda se pueda posicionar de manera absoluta sin tener que usar un margen enorme para empujarlo hacia abajo, de esta manera, si se agregan nuevos elementos, el diseño seguirá manteniendo sus dimensiones originales.

También configuramos los enlaces en la navegación para que se muestren como bloques, de modo que se pueda hacer clic en toda el área y no solo el texto, y se agreguen los fondos de apertura y cierre utilizando sus respectivas clases y ajustando la posición de nuestro sprite..

El submenú con una clase 'cerrada' está configurado para mostrar: ninguno; por lo que solo se muestra el predeterminado.

 / * -------------------------- * / / * MENÚ IZQUIERDO * / / * ------------ ------------ * / / * Menú principal * / #left ancho: 235px; flotador izquierdo; min-height: 615px; posición: relativa;  #left .logo a background: url ("? /images/sprite.png") no-repetir scroll 0 0 transparente; bloqueo de pantalla; altura: 32px; margen: 8px auto 0; texto-sangría: -999999px; ancho: 190px;  #left .menu ancho: 100%; borde superior: 1px sólido #eaeaea; margen superior: 30px;  #left .menu li a display: block; altura: 35px; línea de altura: 35px; relleno-izquierda: 22px; borde inferior: 1px sólido #eaeaea;  #left .menu li a.active color: # 0285DA; borde derecho: 1px sólido #fff;  #left .menu li a.closed background: url ("? /images/sprite.png") scroll de no repetición 46px -231px transparente;  #left .menu li a.opened background: url ("? /images/sprite.png") no-repita el desplazamiento 46px -257px transparente;  #left .menu li .sub-menu li a padding-left: 38px;  #left .menu .sub-menu.closed display: none;  # left bottom: position: absolute; abajo: 0; ancho: 100%;

Para los íconos sociales de abajo, configuramos las imágenes usando la combinación respectiva y configurando las imágenes de fondo usando posiciones, esto también se aplica al estado de desplazamiento..

 / * Social * / # left-bottom .social overflow: hidden; altura: 34px; borde superior: 1px sólido #eaeaea; borde inferior: 1px sólido #eaeaea; relleno-izquierda: 25px;  # span inferior .social span float: left; línea de altura: 34px;  # left-bottom .social ul float: left; margen: 9px 0 0 10px;  # left-bottom .social ul li float: left; altura: 34px;  # izquierda-abajo .social ul li a background: url ("? /images/sprite.png") no-repita el desplazamiento -5px -50px transparente; bloqueo de pantalla; altura: 16px; ancho: 16px; margen: 0 5px 0 0; texto-sangría: -999999px;  # izquierda-abajo .social ul li a: hover background-position: -5px -80px;  # left-bottom .social ul li a.picasa background-position: -26px -50px;  # left-bottom .social ul li a.picasa: hover background-position: -26px -80px;  # left-bottom .social ul li a.vimeo background-position: -47px -50px;  # left-bottom .social ul li a.vimeo: hover background-position: -47px -80px;

Y para la parte de búsqueda, básicamente estamos flotando los divs del contenedor de entrada y estableciendo los archivos en ellos en lugar de en la entrada.

 / * Search * / # left-bottom .search overflow: hidden; margen superior: 12px;  # izquierda-abajo .search .left background: url ("? /images/sprite.png") no-repita el desplazamiento -5px -203px transparente; flotador izquierdo; altura: 27px; margen izquierdo: 20px; Relleno: 6px 0 0 10px; ancho: 158px;  # entrada inferior izquierda .search .left borde: ninguno; fondo: transparente; ancho: 100%;  # left-bottom .search .right background: url ("? /images/sprite.png") no-repita el desplazamiento -173px -203px transparente; flotador izquierdo; altura: 27px;  # entrada inferior izquierda .search .right fondo: ninguno repita el desplazamiento 0 0 transparente; borde: medio ninguno; cursor: puntero; altura: 27px; ancho: 27px;

Así que aquí está lo que tenemos ahora en Firefox.

Paso 6 Derecho contenido CSS

Aquí simplemente estamos flotando los elementos de la lista para obtener una visualización de cuadrícula, agregamos relleno, color de fondo y bordes para obtener un marco para cada mensaje y también agregamos márgenes para la separación.

Finalmente. Tenemos nuestros botones con un contenedor div que está centrado y ambos enlaces flotan.

 / * ------------------------------ * / / * CONTENIDO DERECHO * / / * -------- -------------------- * / / * Contenido de la Galería de miniaturas * / #right width: 758px; flotar derecho;  #right .thumbnails desbordamiento: oculto; relleno: 10px 0 0 32px;  #right. thumbnails li float: left; margen: 0 21px 18px 0;  #right .thumbnails li a border: 1px solid #eaeaea; relleno: 2px; fondo: # f2f2f2; bloqueo de pantalla;  #right .navigation margin: -10px auto 0; desbordamiento: oculto; ancho: 50px;  #right .navigation a background: url ("? /images/sprite.png") no-repetir scroll 0 0 transparente; bloqueo de pantalla; flotador izquierdo; altura: 21px; texto-sangría: -999999px; ancho: 21px;  #right .navigation .prev background-position: -159px -75px; margen: 0 8px 0 0;  #right .navigation .next background-position: -186px -75px;

Aquí está nuestra primera página terminada en firefox.!

Paso 7 Segunda página HTML

Pasando a nuestra subpágina, lo que hacemos es duplicar nuestro index.html y nombrarlo como subpage.html o inner.html, luego sacamos todo el contenido de nuestro # contenedor correcto y comenzamos a construir el html necesario para nuestra galería de controles deslizantes. y los 3 módulos siguientes.

Necesitamos un div para guardar todo el marcado de mi presentación de diapositivas, una lista de imágenes que serán las diapositivas y también usaremos 3 versiones diferentes de las imágenes para que podamos ver algo de acción más adelante con el complemento jQuery Cycle.

También estamos configurando una división en blanco que se colocará absolutamente encima de las imágenes para que funcione como un marco en caso de que alguna vez sea necesario implementar este diseño en un CMS para obtener contenido dinámico. Si esto sucede, solo podemos agregar cualquier imagen sin tener que hacer photoshop de las esquinas redondeadas y las sombras antes de la mano..

Y, finalmente, para la presentación de diapositivas necesitamos crear un div de navegación con un par de enlaces para nuestra navegación de galería "anterior" y "siguiente".

   
 
 
 
  
  Anterior Siguiente

Nuestro último bloque de contenido tiene nuestros 3 módulos configurados en su propio contenedor, cada módulo es un div en sí mismo que flotará para que estén uno al lado del otro. Dentro tengo una etiqueta h2 para el título y un párrafo para el texto..

   Módulo uno
 Sed korem sit feugiat erat at ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapiens in neque ultrices varius. Lorem ipsum texto.
 
  Módulo dos
 Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, semper rhoncus diam justo in ante. Aliquam in ultrices eleifend libero, in sit amen consectetur velit quis.
 
  Módulo tres
 Suspensión de la puerta de la página web. Cras lorem lectus, viverra sit amet sempre quis, vehicula quis velit.

Paso 8 Segunda página CSS

En este diseño en particular, obtener el marco para las diapositivas fue un poco complicado, así que esto es lo que hicimos:

Tomamos la capa llamada "Shape 90" y colocamos el relleno en 0%. Luego hizo clic derecho en la capa llamada "1720729_high", seleccionó la máscara de recorte de liberación y luego ocultó la capa.

Volvió a la capa "Shape 90" y configuró la opacidad al 50%. Haga clic derecho en la capa e hizo un duplicado, seleccionó ambas capas de "Forma 90" y las fusionó.

Ahora puede guardar el marco como un archivo .png transparente separado y simplemente agregar un fondo blanco en las esquinas para que cubra las imágenes en la parte posterior.

Establecimos las dimensiones para los módulos y los flotamos para ponerlos en línea; después de eso configuramos los estilos junto con el sprite como imagen de fondo para los iconos.

Establecemos los elementos de la lista desde el control deslizante para tener una posición: absoluta; con relación a la ul para que se colapsen y se vean como una sola imagen para que podamos obtener el aspecto real del diseño, agregaremos la funcionalidad después de que todo esté listo.

Los botones anterior y siguiente también están posicionados absolutamente para que podamos centrarlos verticalmente.

 / * Slideshow Gallery Content * / # gallery-holder posición: relativo; ancho: 719px; margen: 20px auto 0; altura: 442px;  # gallery-holder .slideshow-frame background: url ("? /images/slideshow-frame.png") no se repite el desplazamiento 0 0 transparente; altura: 442px; posición: absoluta; arriba: 0; izquierda: 0; ancho: 719px; índice z: 10;  # gallery-holder .slideshow li height: 442px; posición: absoluta; arriba: 0; width: 719px # gallery-holder .navigation a height: 92px; izquierda: 0; margen superior: -44px; posición: absoluta; superior: 50%; ancho: 47px; índice z: 15;  # gallery-holder .navigation a.prev background-position: -6px -103px; margen superior: -44px;  # gallery-holder .navigation a.next background-position: -65px -103px; izquierda: auto derecha: 0;  # modules-holder desbordamiento: oculto; margen superior: 24px; margen izquierdo: 20px;  # modules-holder .module float: left; ancho: 204px; margen derecho: 40px;  # modules-holder .module h2 font-size: 18px; fuente-peso: normal; margen inferior: 5px; relleno-izquierda: 25px;  # modules-holder .module h2.module-one background: url ("? /images/sprite.png") scroll de no repetición -128px -170px transparente;  # modules-holder .module h2.module-two background: url ("? /images/sprite.png") scroll de no-repetición -128px -140px transparente;  # modules-holder .module h2.module-three background: url ("? /images/sprite.png") scroll de no repetición -128px -110px transparente;  # modules-holder .module p color: # 6a6a6a; altura de línea: 15px;

Después de todo esto, podemos ver que los títulos de los módulos tienen una fuente de Museo que no es una fuente segura para la web, por lo que tendremos que configurar esto con @ font-face. Así que corrimos la fuente a través de Font Squirrel (http://www.fontsquirrel.com/fontface/generator) y colocamos las fuentes en su propia carpeta de fuentes en la raíz de nuestro Proyecto y configuramos el CSS en nuestra configuración general usando la derecha caminos para las fuentes.

 /*---------------------------------*/ /* CONFIGURACIÓN GENERAL */ /*----- -------------------------- * / body altura: 100%; fuente: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif; color: # 000; background: url ('? /images/bg.jpg') repite #fff;  a texto-decoración: ninguno; color: # 000; a: hover text-decoration: none; color: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') formato ('embedded-opentype'), url ('? /fonts/museo700-regular-webfont.woff') formato ('woff '), url ('? /fonts/museo700-regular-webfont.ttf ') formato (' truetype '), url ('? /fonts/museo700-regular-webfont.svg#Museo700 ') formato (' svg ') ; fuente-peso: normal; estilo de letra: normal;

Así que todo lo que tenemos que hacer ahora es establecer la familia de fuentes en nuestras etiquetas h2, y ahora nuestra segunda página está completa.

 # modules-holder .module h2 font-family: 'Museo700'; tamaño de fuente: 18px; fuente-peso: normal; margen inferior: 5px; relleno-izquierda: 25px;

Paso 9 jQuery Magic

Ahora, para agregar algunas funciones y animaciones a nuestro proyecto, usaremos dos complementos: jQuery Cycle para nuestra presentación de diapositivas (http://jquery.malsup.com/cycle/) y prettyPhoto para nuestra galería de lightbox (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) y luego crearemos una función personalizada para nuestro menú de acordeón.

Asegúrese de descargar el complemento prettyPhoto y de copiar los recursos necesarios en sus respectivas carpetas (javascript en la carpeta "js", hojas de estilo en la carpeta "css", etc.), el complemento de ciclo se puede vincular desde Github y jQuery se puede vincular de las API de Google.

También crearemos un archivo main.js en nuestra carpeta JS donde podemos poner nuestra función personalizada y la configuración del complemento..

Por lo tanto, hacemos referencia a nuestra hoja de estilo en el encabezado de los archivos html

    ShutterPress

También hacemos referencia a nuestros archivos javascript en la parte inferior de nuestro documento justo antes de la etiqueta html de cierre.

Ahora volvemos a nuestra lista de miniaturas y configuramos los enlaces con el atributo rel para que nuestra galería de lightbox funcione. También tenemos los enlaces que apuntan a una imagen de 500x500 marcadores de posición para que podamos mostrar algo en nuestra caja de luz

Y finalmente, vamos a nuestro archivo main.js y comenzamos a configurar nuestros complementos. Asegúrese de leer la documentación de los complementos para saber exactamente cómo funcionan y las opciones que tiene para personalizarlos..

Para nuestro acordeón debemos configurar una función de clic que verifique si el enlace tiene una clase de "abierto" o "cerrado". Si está "cerrado", entonces abre el submenú respectivo y colapsa todos los demás y cambia la clase de los enlaces para que se muestre el icono correcto. Si el que está haciendo clic tiene una clase de "abierto", entonces simplemente lo cierra y cambia el icono.

 $ (document) .ready (function () // prettyPhoto LIGHTBOX $ ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (); // MENU ACCORDION $ ('# left .menu li a'). haga clic en (function () if ($ (this) .hasClass ('closed')) $ (this) .toggleClass ('closed closed'); $ (this) .parent (). siblings (). find (' .sub-menu '). slideUp (); $ (this) .parent (). siblings (). find (' a.opened '). toggleClass (' open closed '); $ (this) .next (). slideDown (); devolver falso; else if ($ (this) .hasClass ('abierto')) $ (this) .toggleClass ('open closed'); $ (this) .next (). slideUp (); return false;) // SLIDER GALLERY $ ('. slideshow'). cycle (fx: 'fade', next: '# gallery-holder .navigation a.next', prev: '# gallery-holder .navigation a.prev '););

Fin del día 3: Revisión

Y ahora tenemos un proyecto 100% terminado con galerías de trabajo y animaciones de submenú. Disfrutar!

En el último día de nuestra serie de tutoriales, le explicaremos cómo crear sus propias variaciones personalizadas de esta plantilla con solo un par de ediciones rápidas. Desde estilos oscuros y sucios hasta modernos efectos metálicos, no querrá perderse el último día.!

Oh! Y lo mencionamos el primer día del tutorial, pero si está interesado en tener una versión de WordPress de esta plantilla disponible en ThemeForest, avíseme en la sección de comentarios.!

Créditos de codificación

La codificación y el tutorial para esta fase de la serie fueron proporcionados por CodeMyConcept, que ofrece una amplia gama de servicios de codificación para diseñadores, desde PSD> conversiones de HTML a plantillas de correo electrónico y de WordPress. Echa un vistazo a su sitio en CodeMyConcept.com!

Diseño web