Cómo construir tu propio sitio web única carpeta de la página

Cómo construir tu propio sitio web única carpeta de la página

Un gran sitio en busca de cartera es fundamental para cualquier diseñador a presentar de inmediato su trabajo a los posibles clientes o empleadores. Un sitio simple, una sola página puede hacerlo de manera eficaz al mostrar tres características principales de la cabecera grande, con breve introducción, ejemplos de su trabajo y los métodos de contacto, todo en uno, muy navegable página. Echemos un vistazo a la producción de un concepto de página de la lista única en Photoshop, la construcción de la página en XHTML / CSS y añadir alguna funcionalidad elegante con jQuery.

También conocido como Diseño Web práctico en los EE.UU..El artículo titulado Crear tu propio sitio individual de cartera de las páginas con XHTML / CSS y jQuery apareció en el número 188. La gente de la revista NET han aceptado amablemente que el artículo para ser publicado aquí en Blog.SpoonGraphics para los que podría haber pasado. Lo recomiendo encarecidamente la comprobación hacia fuera los nuevos temas de la revista NET , y para atraparlos en Twitter para conocer algunos consejos prácticos de diseño web y 

TECNICAS.

Su portafolio en línea es el lugar para presentarse al mundo y mostrar su trabajo y de habilidades. Érase una vez el estuche de cuero tradicional era la forma normal de mostrar los empleadores y los clientes lo que usted puede hacer, hoy en día un sitio web personal es su principal punto de venta. Claro, usted podría usar sitios web como Flickr , DeviantArt o similar para producir una colección rápida y fácil de trabajar, pero estamos queriendo dar una imagen profesional aquí, y nada es mejor que su sitio propia mano hecha a mano en buena situación bajo su personalizada . com nombre de dominio .

  

Lo que estamos buscando lograr, es construir un sitio web sencillo que recopila la información importante de lo que eres, lo que hace, ejemplos de su trabajo y los métodos de contacto. Estos son los puntos clave de cualquier persona que quiera contratar a un diseñador va a necesitar. El sitio también tiene que mirar muy bien, pero de no ser demasiado en-su-cara que lleva el centro de atención de los ejemplos de su trabajo, por lo que vamos a construir un diseño limpio y estructurado con detalles sutiles. Por último, también queremos que el sitio para mantener la atención del espectador, si su sitio web es parte de un grupo de solicitudes de empleo que no queremos permitir que el espectador pierda el interés accediendo a la página tras página. Limitar el sitio a una sola página ayuda a mostrar toda la información de forma rápida y eficaz.
Vamos a empezar con la maqueta de Photoshop, para luego pasar a la Nitty Gritty de la codificación con XHTML / CSS, y terminar con algunas características de lujo con un plugin de jQuery increíble .

Preparar el documento

Comience a trabajar con la apertura de Adobe Photoshop, crear un nuevo documento en el 1680x1050px. Dibuja en las guías para destacar un área de 960px de ancho para dar cabida a los monitores de 1024 × 768 de resolución.No queremos que los principales elementos de la página errantes allá de este punto. También se elaborará una cuadrícula básica para alinear los elementos de la página de, dando un aspecto agradable y estructurado.

Añadir un poco de textura

Rellene el documento con un color beige suave y luego ir a Filtro> Ruido> Añadir Ruido. Introduzca el 3% y marque la opción monocromático. Pegar en una textura concreta de Bittbox.com . Fade out de los bordes con una máscara de capa y un cepillo suave, a continuación, cambiar el modo de fusión a la superposición de un 40% de opacidad.

Introduce Yourself

Uso de la cuadrícula como guía, escriba su nombre y una breve introducción de sus servicios en su tipo de letra favorito. Añadir una gota de sombra muy suave y cambiar el modo de fusión a Overlay. Hacer hincapié en la jerarquía visual, haciendo que el nombre se destacan con un tamaño más grande y fuerte apariencia.

Presentar las mercancías

Escoja una pequeña selección de su trabajo y recortar hacia abajo a las miniaturas en 400x180px. Añadir un derrame cerebral 10px en el 10% de opacidad para que se mezclen en el diseño. Preste especial atención a su alineación el uno al otro, haciendo que el espacio horizontal y vertical entre cada imagen es la misma.

Métodos de Contacto

Vez que el usuario ha navegado por la selección de los trabajos, es posible que quieran ponerse en contacto o conecte. Haz una lista de e-mail junto a sus principales redes sociales, como Twitter y Facebook. Utilice los iconos del doodle de un post anterior aquí en Blog.SpoonGraphics.co.uk para darle vida a los enlaces. Añadir una superposición de color para combinar éstos en el esquema de color del sitio.

El concepto general

Aquí tenemos nuestro concepto gráfico de nuestro sitio web, diseñada exactamente cómo tenemos previsto que se vea. Hay una sutil textura con el diseño para añadir interés visual, un esquema de color básico en torno a nuestra marca, una selección de nuestro trabajo y una lista de los métodos de contacto. Tiempo para tomar un merecido descanso.

Exportar el Fondo

Nuestro concepto utiliza la gran superficie de la textura de la piedra como parte del diseño, cambiar la visibilidad de todas las otras capas y copiar una gran parte de la gráfica. Guardar para Web y ajustar la compresión de encontrar un término medio entre el tamaño del archivo y calidad de imagen.

Exportar los elementos de la página

Seguir cortando el documento y la exportación de los archivos individuales.Debido a la letra fría y efectos usados ​​en el texto, vamos a tener que exportar estos como imágenes también. Sin embargo siempre se puede sacrificar las características de los pequeños de diseño en favor de un estilo de fuente web segura, o incluso tecnologías como sIFR.

Optimizar uso de sprites

Cuando se trata de exportar los iconos, podemos combinar estos archivos en un gráfico de sprites sola. Copie cada icono a su vez y apilarlos unos encima de otros en un nuevo documento, a continuación, Guardar para Web. Esto reduce lo que hubiera sido 7 las peticiones de imágenes en una, para una rápida carga de la página.

Escribir hasta el XHTML

Comience a trabajar la redacción del XHTML en una aplicación de código de su elección. Preste atención al uso de las etiquetas HTML más naturales para cada elemento de la página, tales como etiqueta H1 para el más grande título, H2 para los títulos más pequeños y UL para las listas de las imágenes de la cartera y los métodos de contacto.

El estilo que con CSS

Con los tags HTML en el lugar, el estilo CSS se pueden agregar para cambiar la apariencia del código. Comience con un reset para eliminar cualquier navegador o específica estilo predeterminado. La textura de la repetición puede ser unida al cuerpo, mientras que el fondo más grande se puede utilizar junto con una página de DIV-wrap.

Diseñar la estructura de página

El estilo del div contenedor con un ancho específico y complemento margin: 0 auto; para alinear el div de forma centralizada en la página. Los títulos también pueden ser de estilo mediante la propiedad background-image. No te olvides de cambiar el texto por defecto fuera de la pantalla utilizando-9999px. Esta es una imagen comúnmente utilizado CSS técnica de reemplazo.

Flotar Las Miniaturas

Por defecto una lista desordenada mostrará verticalmente con viñetas feas, pero el viejo y buen UL puede ser muy versátil, con la ayuda de CSS. Flotar en las miniaturas de la cartera a la izquierda para sentar a cabo al lado del otro, a continuación, añadir un poco de relleno y el margen de espacio fuera igual que el concepto.

Ponga el Sprite en Acción

El sprite de la imagen que se produjo con anterioridad se pueden implementar con CSS. Estilo del pie de página # ul li a, con todas las opciones genéricas, tales como margen, el relleno, color y tamaño de la fuente, así como la adición del contacto icons.jpg background-image y el establecimiento de no-repetición.A continuación, para cada clase de anclaje individual, objetivo en el icono apropiado usando la regla background-position.

Condimentar con jQuery

Por defecto, los enlaces de imágenes para la cartera sólo se abrirá en el navegador, pero eso es aburrido! Con el uso de algunos plugins impresionante, confeccionadas junto con el framework jQuery fácilmente podemos añadir algunos efectos de gran apariencia. Descargue el paquete de la mesa de luz jQuery de Leandrovieira.com .

Copiar los archivos

Las descargas lightbox con jQuery como un ejemplo completo, seleccionar los archivos que necesitamos y copiarlos a la carpeta de proyecto propio.Necesitamos jquery.js y jquery.lightbox-0.5.js, jquery.lightbox 0.5.css y los 5 archivos de imagen. Enlace a los archivos Javascript y CSS en el HEAD de su documento HTML. A continuación, escribir el guión jQuery para dirigirse a los enlaces de la cartera.

La página web completa

Con la funcionalidad de jQuery en lugar de nuestro sitio web debe estar buscando en el clavo. Contamos con un simple sitio de la página, con la breve frase introductoria, una colección de ejemplos de trabajo que inicie con un efecto increíble animación y una serie de portales de contacto. Nuestro sitio web es completa, ¿o no? ...

Navegador de Pruebas

Es crucial visitar nuestro sitio en una variedad de navegadores de todos los días. Nuestro código válido puede parecer grande en Firefox, Safari, Chrome y Opera, pero Internet Explorer a veces puede mostrar los problemas más extraños. IE7 parece bien, pero IE6 está mostrando el típico 'reductor' error en los enlaces de pie de página. Display: inline a la LI antes de que las clases!

El momento de lanzar

Con la tranquilidad de un sitio de mostrar correctamente en varias resoluciones y navegadores que podemos seguir adelante y poner nuestra página web recién horneado vivir por el mundo para ver. Echa un vistazo a la demo de trabajo , incluyendo una completa copia de la hoja de estilos comentó .

Fuente: