Vamos a comenzar esta serie con diseño de la parte I –.
Establecen el grunge
Abrir Photoshop y crear un nuevo 1300px de x 1000px de documento. Esto es sólo para asegurarse de que contamos con amplio espacio para un sitio wide 920px si deseamos. Es muy importante recordar que Photoshop es simplemente una herramienta como el lápiz y papel. Ancho puede cambiarse una vez que empezamos la segunda parte que es la parte de codificación.
Una vez que está abierto, cambiar el fondo a # ded6a9
Utilizando los pinceles grandes arañazos de myPhotoshopBrushes.com, cree una nueva capa y tomar el segundo pincel, cambiar la anchura del pincel para 1400px y aplicar a esta nueva capa. Cambiar la opacidad al 7%.
Buena pinta! Pero necesitamos más cosas grunge. Agarra los pinceles cuadrados y entre paréntesis y vamos a agregar algunos más. Crear 3 nuevas capas y aplicar brushe 3. Defina la opacidad a diferentes niveles para obtener un mejor efecto. Esta parte es realmente hasta usted y cómo desea que se vea. Aquí es lo que hice.
En la primera capa, he utilizado este pincel y defina la opacidad al 8 %
En la segunda capa, he usado este uno con opacidad 11 %
Y el último de ellos fue utilizado este pincel y la opacidad de la capa se establece en 21 %
El resultado debería ser algo como esto
Crear el encabezado
A continuación, permite crear una barra de navegación en la parte superior que va a contener vínculos de páginas importantes tales como: Inicio, sobre archivos, contacto y RSS. Utilice la herramienta de rectángulo y crear un rectángulo 1000 x 55 y colóquelo en la esquina superior izquierda (0, 0). Aplicar una superposición de degradado con los colores # 2c2c2c y # 5e5e5e y cambiar la posición del punto medio de color al 70%.
A continuación, agregue el texto inicio, acerca, archivos y contacto de la izquierda mano lado y fuente RSS a la derecha. Para hacer el vínculo RSS destacan más, fui a pinvoke y descargaron sus iconos de fuga que parecen realmente grandes. Abren el icono feed.png y colóquelo junto al vínculo RSS.
Por el título, fui a DaFont.com y había descargado la fuente Times New Yorker. Una fuente de gran grunge con estilo que agrega carácter a nuestro diseño. El color utilizado es # 363636 en 48px.
Ahora a una navegación secundaria que contenga vínculos a categorías. Cree una nueva capa y bajo el título de hacer una selección de 1000 × 80 y rellenar con el color blanco (# FFFFFF). A continuación, cambiar la opacidad de la capa al 65%. Debería obtener algo como esto:
Ahora a la diversión parte. Duplique la capa que acaba de crear para que tenga una copia de repuesto en caso de que lo que haces siguiente no ven bien por lo que sólo puede empezar. Ocultar el original y trabajar en esta capa duplicada. Agarrar la herramienta Borrador y utilizar este brush… de salpicaduras
… y empezar a "borrar" partes del cuadro. No intentar ir demasiado cerca al que lado los bordes para que cuando esto cortamos para el XHTML, repetirá suavemente. Recuerda que no existe derecho o mal aquí tan sólo divertirse con esto. Aquí es qué mina parece.
Agregar algunas categorías de texto ficticio utilizando la fuente Verdana fijado en 18px con el color # 363636.
Sobre el contenido
Ahora se realiza la sección de encabezado. ¿Busca gran ¿no? Vamos a mantenerlo! Ahora nos iremos y prepárate la sección contenido. Nos vas crear un diseño de 2 columna así una gran columna para el contenido real y uno más pequeño como una barra lateral.
Vamos a comenzar con el contenido. Cree una nueva capa y hacer una selección 650px x 900px y rellenar con esta agradable color beige: # f4f1e2. A continuación, agregar un borde de 1px en el interior con el color # b4b2aa.
Ahora podemos agregar algún contenido ficticio con Lipsum texto. Todo el texto tendrá el tamaño del texto de 12px. Títulos serán 24px y el enlace de Continue Reading será 14px con color # b54646. La fecha se establece a 10px con color # 777777. Para hacer la nueva entrada en pruebas vamos a poner un fondo blanco y el contenido en 14px. El resto seguirá siendo el mismo.
La imagen de calendario que tuvo desde los iconos de fuga de pinvoke. Todos los iconos en el diseño vendrá desde allí mantienen tan útil.
Ahora en la parte inferior de esos puestos añadiremos algún texto "anterior" y "siguiente" para navegar entre los archivos. Anterior de algo simple, así que vamos a poner a la izquierda y luego a la derecha y ambos con una flecha de Niza desde el conjunto de fuga. Vamos a utilizar el tamaño de fuente de 12px y el color # 89835a.
Una barra lateral
Nuestro panel lateral tendrá una serie de cuadros de etiquetas, puestos populares y últimos comentarios. También tendremos espacio publicitario en la parte superior. Así que vamos a obtener craqueo.
La creación de los cuadros del anuncio es bastante simple. Nos va a ir con 145 x 145 cajas que suele ser un tamaño bastante estándar. Así crear un cuadrado con la herramienta Rectángulo (U) de 145 × 145. Rellenar con el color # cbc189 y agregar un borde de 1px en el interior con el color # a4974d. Ese será también el color del texto que vamos a utilizar. Duplicar 3 veces lo tienes 4 cajas y poner ellos 2 x 2 como tan.
Luego añadimos algún texto "publicidad 145 × 145″ en 2 líneas. Fuente tamaño 12px con color # 948532.
A continuación agregamos nuestra función de búsqueda. Volver a utilizar la herramienta Rectángulo, crear un cuadro que es 225px x 30px. Hacer del mismo color y fronterizos así como nuestra gran cuadro contenido: contenido de color # f4f1e2, frontera color # b4b2aa. Como para el botón, ya estaremos usando el botón predeterminado de exploradores al crear la página en HTML, utilice sólo la herramienta Rectángulo redondeado con cualquier color de fondo.
A continuación añadiremos nuestros cuadros de etiquetas, puestos populares y comentarios recientes y títulos. Dado que el contenido de las cajas será dinámico (es decir títulos largos, títulos cortos, etc...) haremos les todos el mismo tamaño para ahora tan podemos hacernos una idea de lo que se verá como. Nuestros títulos tendrán un tamaño de fuente de 18px y el color # 776a23. Nuestros cuadros utilizará el mismo fondo y el efecto de borde como el cuadro de búsqueda. Vamos a hacer los cuadros todos 300px x 120px y podrá encajar contenido consecuencia.
Nos iremos en esos cuadros ahora y añadir texto falso. Como viñetas para los puestos populares, podrá volver a los iconos de fuga de pinvoke y utilizar el bookmark_document.png. Y por los recientes comentarios, vamos a ir con ballon.png. Todos nuestros todos enlaces el futuro sitio estará en rojo (# b54646), por lo haremos en la barra lateral, así.
Acabado con el pie de página
Para el pie de página, usaremos la misma técnica como con la navegación secundaria por encima de lo que significa que nos será borrado en el Fondo para que sea agradable y grungy.
Vamos a empezar por crear una nueva capa. Utilizando la herramienta Marquesina (m), crear un rectángulo en sobre 1220px todo el camino hasta la parte inferior derecha esquina de su lienzo. Rellenar con negro y cambiar la opacidad de la capa al 15%. Debe tener algo como esto:
Ahora agarra tu borrador y empezar a borrar el borde superior. Recuerde hacer un duplicado por si acaso y no ir demasiado cerca a los lados por lo que nosotros podemos cortarlo bien después. Aquí es lo que me ocurrió con:
Todo lo que queda por hacer ahora, es simplemente agregar una navegación de la parte inferior, así como la información de copyright.
Y eso es todo! A continuación hasta en esta serie, te tomamos este mismo diseño y convertirlo en una página HTML y CSS funcional. Haga clic aquí para leer la parte 2!
Establecen la marcación
Por lo tanto, vamos a empezar con algún código predeterminado para un diseño básico de 2 columnas con encabezado y pie de página. Nuestro diseño será un diseño fijo, lo que significa que no se extenderá en función de los visitantes resolución de navegadores.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA"> <head> <title>Some title |
No se puede obtener más simple que eso. Es hueso bastante desnudo y eso es cómo iniciar la marcación, al igual que hicimos en el tutorial de estructura de una web de A Z, entonces vamos a ir y poner todos nuestros contenidos y, a continuación, nos ocuparemos con estilo y agregar fondos, colores y fuentes.
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA"> <head> <title>Some title |
Allí! Mark-up se hace bastante. Probablemente volveremos a que o bien Ajustar/cambiar los nombres de algunas de nuestras clases o ID, o incluso agregar algunos pero por ahora, esto no tiene prácticamente todos los componentes importantes.
División
En los días cuando las tablas de diseño eran negocios de todo el mundo, podríamos ir en Photoshop y usar el HTML de generar con la herramienta de corte. Pero luego que genera una cantidad de imágenes y código obsoleto loca por lo que se hospedará bien claro de que y en su lugar, lo hacemos a mano.
Puedo escuchar el suspiro exasperado desde aquí. El camino que lo miro, sólo necesitamos corte de copia de segmento 6 imágenes. Yep… no 50, como el generador haría normalmente dar usted, pero 6, seis, seis. Uno de los principales antecedentes grungy (1), uno para la navegación superior (2), uno para la cabecera (3), uno para el logotipo (4), uno para el menú de categoría (5) y otro para el pie de página (6). Eso es todo. El resto son iconos que ya hayamos descargado de pinvoke por lo que no necesitamos tocarlos.
¿Está preparado? Vamos a empezar!
Nuestro fondo principal
Como dije anteriormente, las grandes cosas de Photoshop (y más avanzados programas de gráficos) las capas y la capacidad de ocultar a voluntad. Así que a fin de obtener antecedentes, te ocultamos prácticamente todo en nuestro documento.
Ahora es sólo una cuestión de acoplar las capas y guardar en main-bg.jpg
Encabezado
Ahora necesitamos que ese fondo a cuadros. Y lo queremos como un archivo transparente por lo que transparentará el grunge de nuestra imagen de fondo principal. Por lo tanto, como lo hicimos con el fondo principal, podrá ocultar todas las capas excepto aquellos haciendo la imagen de cuadros grungy.
Así acabará con algo como esto
Para obtener nuestra imagen, cambiaremos el tamaño del lienzo a 1000px x 235px
Y guardar la imagen como un archivo PNG transparente llamado header-bg.png
Navegación superior
Dado que nuestra navegación superior tiene un ligero efecto degradado, necesitamos una imagen de fondo para así. No necesitamos una gran imagen para ello. Bastará sólo 5px x 55px.
Así que sería acabar con esto y guardarlo como top-nav-bg.jpg
Marca
Aquí queremos simplemente el título para mostrar contra un fondo transparente. Así que lo que haremos es abrir un nuevo documento de 350px x 60px
y poner nuestro título allí utilizando la misma fuente (Times New Yorker: 48px) y guardar como branding.png
Menú de categoría
Bastante simple ahora que ya hemos hecho algunos. Aquí nos podrá ocultar todo excepto nuestra imagen que componen ese fondo grungy.
Ahora, pulsando comando + ratón pulse (ctrl + clic del mouse en Windows derecha) sobre esa copia de capa 7, automágicamente productos todo lo que necesito.
A continuación, copiar, crear nuevo archivo, pegar y voilà, el fondo de mi categoría. Solo falta definir la opacidad a 65% y estoy fuera de las carreras. Salvemos que uno como cat-nav-bg.png
Pie de página
Para nuestro pie de página, usaremos la misma técnica que utilizamos para nuestro fondo de navegación de la categoría. Tan ctrl + clic derecho sobre la capa de pie de página y pegar en un nuevo archivo, cambiar la opacidad al 15% y nosotros vamos a hacer. Nos ahorrará a éste último como footer-bg.png.
Y ahora tenemos todas nuestras imágenes por lo que estamos dispuestos a seguir adelante y poner todo junto.
Crear la hoja de estilos y ponerlo todo junto
Lo primero que tenemos que tener en cuenta es que nuestro lienzo original era 1000 píxeles de ancho por lo que queremos contener ciertas partes de nuestro contenido en un espacio de 960 píxeles. Haremos ajustes a nuestra marca como nos vamos y agregar contenedor div
Lo primero es lo primero, vamos a agregar un vínculo a nuestra hoja de estilos en la nuestra marcación:
1 2 3 4 5 6 7 | <head> <title>Some title |
Ahora vamos a quitar los bordes predeterminados alrededor de la página. También adelante y agregar nuestro fondo principal al elemento body, así como tamaños de fuente y familia y colores de texto.
01 02 03 04 05 06 07 08 09 10 | html, body { margin: 0; padding: 0; } body { font: 12px/16px Verdana, Geneva, sans-serif; color: #000; background: url(../i/main-bg.jpg) repeat 0 0; } |
Encabezado
Para nuestro encabezado, todo lo que necesitamos para establecer aquí es el trasfondo de cuadros grungy y será centro de mantenerse en nuestro ancho de 960px con el resto del contenido.
1 2 3 4 5 6 7 | /*** header ****************************************/#header { background: url(../i/header-bg.png) no-repeat top center; height: 235px; overflow: hidden; } |
Observe que hemos establecido una altura (235px), así como la overflow: hidden propiedad para borrar las carrozas de nuestra navegación.
Navegación
Nuestra exploración superior tiene una leve pendiente que nos hemos cortado de nuestro archivo de Photoshop y tenemos una parte de nuestra navegación a la izquierda y uno a la derecha. No estoy seguro si tienes aviso en la marca pero esas 2 clases que he usado allí (.left y .right), también utilizarlos en unos cuantos más puntos por lo que podrá configurar una "común clase y ID" sección en nuestro CSS donde ponemos los 2 clases así como estilos de vínculos, etc..
1 2 3 4 5 6 7 8 9 | /*** common styles ****************************************/.left { float: left; } .right { float: right; } |
Ya queremos contener nuestra navegación en un espacio de 960px, agregaremos un div contenedor a nuestra navegación.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <div id="navigation"> <div id="navigation-wrapper"> <ul class="left"> <li><a href="">Home |
Nuestra barra negra con el degradado que queremos tenerlo a estirar el ancho del área de visualización de los navegadores, por lo que sólo los enlaces que queremos incluir.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | /*** navigation ****************************************/#navigation { background: #2c2c2c url(../i/top-nav-bg.jpg) repeat-x 0 0; height: 55px; } #navigation-wrapper { width: 960px; margin: 0 auto; padding: 15px 0 0 0; } #navigation-wrapper .left { width: 400px; } #navigation-wrapper .right { width: 80px; text-align: right; } #navigation-wrapper ul { margin: 0; padding: 0; list-style: none; } #navigation-wrapper ul li { float: left; display: inline; margin: 0 20px 0 0; padding: 0; } #navigation-wrapper ul li a { color: #fff; font: 14px Georgia, serif; text-decoration: none; text-transform: uppercase; } #navigation-wrapper ul li a:hover { text-decoration: underline; } #navigation-wrapper ul li a.rss-link { background: url(../i/icons/feed.png) no-repeat 0 0; padding: 0 25px; } |
Marca
Nuestra partida tiene que cuadrado fondo en mosaico, así como la fuente personalizada lo usaremos una imagen para esto. Te pusimos nuestra imagen en un &ht;h1<>/h1< fines de SEO y para los discapacitados visuales, el texto nos pondrá en la >img alt="text" /< se leerá.
Así que sigamos adelante y cambiar esta línea aquí:
1 2 | <div id="branding"><h1>Eroded by Time |
…para incorporar nuestro logotipo y un enlace a la página.
1 2 | <div id="branding"><h1><a href=""><img src="i/branding.png" width="350" height="60" alt="Eroded by Time" />&l;/a> |
Menú de categoría
Esto es donde nuestras categorías para nuestros blogs mostrará en nuestras páginas. En nuestra sección "Slicing up", creamos un fondo irregular que va estar repitiendo horizontalmente. Al igual que nuestra navegación en la parte superior, queremos incluir esto en una zona de 960px y para ello necesitaremos agregar un contenedor div para ello.
01 02 03 04 05 06 07 08 09 10 11 12 13 | <div id="categories"> <div id="categories-wrapper"> <ul> <li><a href="">CatOne |
Gran parte del mismo código utilizaremos como con nuestro NAV.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /*** cateogies *******************************/#categories { background: url(../i/cat-nav-bg.png) repeat-x 0 0; height: 80px; } #categories-wrapper { width: 960px; margin: 0 auto; padding: 30px 0 0 0; } #categories-wrapper ul { margin: 0; padding: 0; list-style: none; } #categories-wrapper ul li { float: left; display: inline; margin: 0 20px 0 0; padding: 0; } #categories-wrapper ul li a { color: #363636; font: bold 18px Verdana, Geneva, sans-serif; text-decoration: none; text-transform: uppercase; } #categories-wrapper ul li a:hover { text-decoration: underline; } |
Y con esto concluye nuestra sección de header ! Hooray!
A la siguiente sección: content
Contenido
Antes de empezar a bucear en nuestro contenido, necesitamos agregar otro contenedor div todo el content y el sidebar para contener tanto los elementos en una zona de 960px.
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <div id="content-wrapper"> <div id="content"> <div class="post featured"> <h2>Lorem ipsum dolor sit amet |
Y nuestro CSS para nuestro content-wrapper básicamente es como nuestra navegación y menús de categorías.
1 2 3 4 | #content-wrapper { margin: 20px auto 20px; width: 960px; } |
¿Aviso de la margin: 20px auto 20px;? Estoy aplicando un margen de relative a la parte superior e inferior, pero la izquierda y la derecha tienen auto por lo que será centro.
Ahora estamos listos para el área de contenido de estilo. Nada complicando muy sucede esto aparte de flotante toda la cosa a la izquierda. Si nunca uso la propiedad float de CSS, no mejor tiempo como el actual derecho bucear en.
El ancho total de nuestro cuadro de contenido es 655 pero ya estamos agregando un borde de 1px todo y 15px de relleno, necesitaremos ajustar el ancho.
1 2 3 4 5 6 7 8 9 | /*** content *******************************/#content { background: #f4f1e2; border: 1px solid #b4b2aa; float: left; padding: 15px; width: 623px; /*655px - 1px - 1px - 15px - 15px = 623px */} |
Los puestos de estilo
Al crear nuestra marca, fuimos por delante y le asigna una clase denominada post a las secciones de cada puesto. La primera de ellas (o más reciente entrada) será ligeramente diferente, por lo que hemos añadido una segunda clase (sí, usted puede hacer eso) llamado featured.
Comencemos con los puestos de la generales a continuación, añadiremos los estilos para el post destacado.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | /*** content - post *******************************/.post { border-bottom: 1px solid #ada997; padding: 20px 0; } .post h2 { font-size: 24px; } .post-date { background: url(../i/icons/calendar.png) no-repeat 0 0; color: #777777; font-size: 10px; padding: 0 0 0 25px; } img.post-thumb { border: 10px solid #fff; float: right; margin: 0 0 10px 10px; } .post-continue a { color: #b54646; font-size: 14px; font-weight: bold; text-decoration: none; } |
Vínculos de navegación de página
Los vínculos de navegación de página que la parte inferior de la página permitirá al usuario la navegación a través de los archivos.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | /*** content - page navigation *******************************/.page-navigation { margin-top: 25px; } .page-navigation .left { background: url(../i/icons/arrow-180-medium.png) no-repeat 0 0; padding: 0 0 0 25px; } .page-navigation .right { background: url(../i/icons/arrow-000-medium.png) no-repeat right 0; padding: 0 25px 0 0; } .page-navigation a { color: #89835a; text-decoration: none; } |
Barra lateral
Es muy fácil de hacer ahora que el contenido de la barra lateral. A pocas cuadras de aquí y allá sin mucho estilo.
1 2 3 4 5 6 7 | /*** sidebar *******************************/#sidebar { float: right; margin-left: 10px; width: 295px; } |
Anuncios
Para los anuncios, normalmente tengo una pila de "imágenes de maniquí" con diferentes tamaños ya creados. Así que para ello sólo podrá cambiar los colores de los ya tienen en mi ordenador para coincidir con el esquema de este sitio. Sugiero que hagan lo mismo. Son tan fáciles de hacer: crear una nueva imagen de 125 × 125, rellenar con color, añadir un trazo 1px Niza (en el interior) y poner al lado del anuncio. Estos son muy útiles para simplemente colocar en sus maquetas de trabajo cliente.
Los anuncios como se puede ver son 2 x 2 y que se organizará en el navegador debido a la anchura que hemos dado a nuestros #sidebar por lo que realmente no es necesario añadir CSS a esto.
1 2 3 4 5 6 7 8 | <div class="sidebar-ads"> <a href=""><img src="i/ads-blank.png" alt="Ad image" /> |
Si está ejecutando este junto a mí y retirar la página ahora, observará algunas grandes fronteras feos alrededor de nuestros anuncios. Eewwww! Para solucionar este problema, podrá establecer nuestras imágenes y vinculado con un borde de 0.
01 02 03 04 05 06 07 08 09 10 11 12 13 | /*** common styles ****************************************/.left { float: left; } .right { float: right; } img, a img { border: 0; } |
Ahhh… Es mejor!
Búsqueda
La única que haremos aquí es añadir un poco de relleno para esta sección por lo que no está atascado a los anuncios.
1 2 3 4 5 | /*** sidebar - search *******************************/.sidebar-search { margin: 20px 0 0; } |
Etiquetas
Como las otras 3 secciones que van a seguir, tenemos el título y el cuadro de estilo.
01 02 03 04 05 06 07 08 09 10 11 | #sidebar h4 { color: #776a23; font-size: 18px; font-weight: normal; } .sidebar-tags, .sidebar-pop-posts, .sidebar-recent-com { background: #f4f1e2; border: 1px solid #b4b2aa; padding: 8px; } |
El unico (aparte de los iconos) que es diferente con las etiquetas es que la lista está en línea con ningún estilo.
01 02 03 04 05 06 07 08 09 10 11 12 13 | /*** sidebar - tags *******************************/.sidebar-tags ul { list-style: none; margin: 0; padding: 0; } .sidebar-tags ul li { display: inline; margin: 0; padding: 0 3px; } |
Populares Posts y comentarios recientes
Como dijimos anteriormente estos tres bloques son todos muy similares. Por lo que podrá combinar los 2 últimos juntos y reutilizar código para reducir nuestros CSS.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | /*** sidebar - popular posts / recent comments *******************************/.sidebar-pop-posts ul, .sidebar-recent-com ul { list-style: none; margin: 0; padding: 0; } .sidebar-pop-posts ul li, .sidebar-recent-com ul li { background: url(../i/icons/bookmark-document.png) no-repeat 0 0; margin: 8px 0 10px; padding: 0 0 0 25px; } .sidebar-recent-com ul li { background: url(../i/icons/balloon.png) no-repeat 0 0; } |
Ah y no nos olvidemos de cambiar el color de los vínculos demasiado
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | "] /*** common styles ****************************************/.left { float: left; } .right { float: right; } img, a img { border: 0; } a:link, a:visited, a:active { color: #b54646; text-decoration: none; } a:hover { text-decoration: underline; } |
Y se hace la barra lateral.
Información del sitio (o pie de página)
Ahora si ves en el sitio en un navegador, observará las cosas de pie de página está metida en la barra lateral. Mal. Así que agregaremos un div de borrar para borrar las carrozas (ver ampliar el fondo alrededor flotante dos de div) y que el sitio de pie muy bien en todo el contenido.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /*** common styles ****************************************/.left { float: left; } .right { float: right; } img, a img { border: 0; } a:link, a:visited, a:active { color: #b54646; text-decoration: none; } a:hover { text-decoration: underline; } .clear { clear: both; } |
Y en nuestro código HTML
1 2 3 4 5 | <div class="clear"> |
Bien, ahora empezamos estilo. Cuando empezamos la segunda parte, cortamos unos antecedentes/imágenes que necesitaríamos y ahora es el momento de utilizar la última una footer-bg.png. Añadiremos a nuestro div de información del sitio
1 2 3 4 5 6 7 | /*** site-info *******************************/#site-info { background: url(../i/footer-bg.png) repeat-x 0 0; height: 61px; /*81px*/ padding-top: 20px; } |
Observe que he añadido un poco de relleno en la parte superior y que es causa del borde áspero. No queremos que el texto sólo estar allí arriba eso nuestra altura es 61 en lugar de 81, necesitamos compensar el relleno.
Ahora, como nuestra área de contenido, queremos que nuestro texto en el pie de página para mantenerse dentro de nuestras fronteras 960px. Así que agregaremos un div site-info-wrapper para ayudarnos a lograr ese objetivo.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | <div id="site-info"> <div id="site-info-wrapper"> <div class="left"> <p>Copyright 2008 - Karinne Legault |
Navegación inferior
Vamos a abordar en primer lugar la navegación de la parte inferior. Podrá reutilizar de gran parte del código que escribió para el cuadro etiquetas, excepto añadiremos borde a la derecha del elemento de menú.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | /*** site-info - navigation *******************************/#site-info .right ul { list-style: none; margin: 0; padding: 0; } #site-info .right ul li { border-right: 1px solid #000; display: inline; margin: 0; padding: 0 10px 0 5px; } |
Si observas esto en su navegador, se observará que el último elemento de menú (RSS) tiene un borde sobre el derecho qué tipo de mirada curioso ya que no hay nada después. Así que sigamos adelante y agregar una clase a ese último elemento y quitar el borde.
1 2 3 4 5 6 7 8 9 | <div class="right"> <ul> <li><a href="">Home |
y el código para quitar el borde
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | "] /*** site-info - navigation *******************************/#site-info .right ul { list-style: none; margin: 0; padding: 0; } #site-info .right ul li { border-right: 1px solid #000; display: inline; margin: 0; padding: 0 10px 0 5px; } #site-info .right ul li.last { border-right: none; } [/html] Copyright and other info Let's make the copyright and other info fit nice and snug together. In order to do this, we'll simply remove all margins and padding to the <code>>p<>/p< |
Nos vamos a hacer!
Eso es todo! Terminamos!
Espero que esto ayude a algunos de ustedes en la comprensión de cómo cortar una maqueta en Photoshop. Como cualquier otra cosa en diseño Web, entender que esto es simplemente una manera de hacerlo. Es cómo lo he hecho durante los últimos 10 años y es trabajado mucho para mí.
Descarga y Demo
0 comentarios:
Publicar un comentario